<template>
  <div class="dashboard-editor-container">
    <div>
      <h1 style="color: black;background:#fff;font-weight:800;line-height: 80px;text-align: center;margin: 0">
        牧科智慧互联数据集成平台 </h1>
      <el-row v-loading="loading" style="background:#fff;padding:16px 16px 0;margin-bottom:10px;">
        <el-col :span="13">
          <div>
            <div ref="chartMaterial" style="width: 100%; height: 300px;"></div>
          </div>
        </el-col>
        <el-col :span="11">
          <div>
            <div ref="chartPig" style="width: 100%; height: 300px;"></div>
          </div>
        </el-col>

      </el-row>
    </div>

    <el-row v-loading="loading" style="background:#fff;padding:16px 16px 0;margin-bottom:10px;">
      <div class="chart-container">
        <div ref="chartWs" style="width: 100%; height: 430px;"></div>
      </div>
    </el-row>


  </div>
</template>

<script>


import * as echarts from "echarts";
import {getTypes, selectMateriaFeedStoreNum} from "@/api/hmy/material";
import {selectPigNum} from "@/api/hmy/pig";
import {getDicts} from "@/api/system/dict/data";
import {findPhouseCode, listEquipment} from "@/api/hmy/equipment";


export default {
  name: 'Index',
  data() {
    return {
      intervalId: [],
      loading: true,
      parkList: [],
      messageList: [],
      //饼状图标题
      titleMaterial: {},
      titlePig: {},
    }
  },
  mounted() {
    this.getStoreNum();
    this.getPigNum();
    this.getMsg();
    this.startPolling();
  },
  beforeDestroy() {
    // 组件销毁前停止轮询
    this.stopPolling();
  },
  methods: {
    fetchEquipment() {
      this.getMsg();
    },
    startPolling() {
      // 启动轮询的方法
      this.fetchEquipment(); // 首次立即执行
      this.intervalId = setInterval(this.fetchEquipment, 1000 * 5); // 每5秒执行一次
    },
    stopPolling() {
      // 停止轮询的方法
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    /** 查询环境信息 */
    getMsg() {
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
          this.initChartWs();
        }
      );
      listEquipment(this.messageParams).then(response => {
          this.messageList = response.rows;
          console.log(this.messageList)
          this.initChartWs();
        }
      );
    },
    //温湿度
    initChartWs() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chartWs);
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '温度和湿度',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        legend: {
          data: ['温度', '湿度'],
          left: 10
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: {
            xAxisIndex: 'all'
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 5,
            xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
            bottom: 5 // 距离容器底部 20px
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 5,
            xAxisIndex: [0, 1], // 控制两个 xAxis 的 dataZoom
            bottom: 5 // 距离容器底部 20px

          }
        ],
        grid: [
          {
            left: 60,
            right: 50,
            height: '33%'
          },
          {
            left: 60,
            right: 50,
            top: '52%',
            height: '33%'
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: this.messageList.map(item => item.creationDate) // 第一个图表的 X 轴数据
          },
          {
            gridIndex: 1, // 指定属于第二个 grid
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: this.messageList.map(item => item.creationDate) // 第二个图表的 X 轴数据

          }
        ],
        yAxis: [
          {
            name: '温度(℃)',
            type: 'value',

          },
          {
            gridIndex: 1, // 指定属于第二个 grid
            name: '湿度(%)',
            type: 'value',
            inverse: true
          }
        ],
        series: this.seriesData() // 确保这个方法返回的是两个系列的数据
      };
      this.tableLoading = false;
      myChart.setOption(option);
    },

    seriesData() {
      let series = [];
      this.parkList.forEach(cloud => {
        // 筛选出具有相同设备站房代码的messageList项
        const messageItems = this.messageList.filter(item => item.equipmentPhouseCode === cloud.equipmentPhouseCode);
        // 生成温度数据系列
        const temperatureSeries = {
          name: '温度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          data: messageItems.map(item => item.equipmentTemperature)
        };

        // 生成湿度数据系列
        const humiditySeries = {
          name: '湿度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: messageItems.map(item => item.equipmentHumidity)
        };
        // 将生成的温度和湿度系列添加到系列数组中
        series.push(temperatureSeries);
        series.push(humiditySeries);
      });
      return series;
    },

    //物料
    getStoreNum() {
      //总数量
      selectMateriaFeedStoreNum('').then((res) => {
        this.titleMaterial.text = '饲料数量';
        this.titleMaterial.subtext = res.data + 'KG';

        this.initChartMaterial();
        this.loading = false;
      })

    },
    seriesDataMaterial() {
      return getTypes().then(res => {
        var types = res.data;
        // 使用 Promise.all 来等待所有异步操作完成
        return Promise.all(types.map(item => {
          return selectMateriaFeedStoreNum(item.materiaFeedTypeId).then(num => {
            return {
              value: num.data,
              name: item.materiaFeedType,
            };
          });
        })).then(series => {
          // series 现在已经是一个包含所有异步结果的数组了
          // 返回你的图表数据结构，其中的 data 部分使用填充好的 seriess 数组
          return [
            {
              type: 'pie',
              name: '数量',
              radius: '50%',
              center: ['35%', '50%'],
              data: series,
            }
          ];
        });
      }).catch(error => {
        console.error("出现错误：", error);
      });
    },
    initChartMaterial() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chartMaterial);
      // 调用seriesData函数，并等待其异步操作结束
      this.seriesDataMaterial().then((series) => {
        // 指定图表的配置项和数据
        const option = {
          // 图例配置
          legend: {
            // 显示图例，如果设置为false则不显示图例
            show: true,
            // 图例列表的布局朝向，可以是'horizontal'或'vertical'
            orient: 'vertical',
            // 图例的位置
            left: 600, // 可以是'left', 'center', 'right'，也可以是数值指定具体像素
            top: 'top', // 可以是'top', 'middle', 'bottom'，也可以是数值指定具体像素
          },
          title: this.titleMaterial,
          grid: [
            {
              left: 10
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)' // 自定义提示框内容
            // {a} 表示系列名，{b} 表示数据名，{c} 表示数据值，{d} 表示百分比
          },
          label: {
            show: true, // 显示标签
            position: 'inside', // 标签的位置，'inside' 表示标签位于扇形区域内部
            formatter: '{b}:{c}(Kg)', // 标签内容格式器，{c} 表示数值，{b} 表示数据项名称
            // 如果需要同时显示名称和数值，可以使用 '{b}: {c}'
          },
          // 使用异步获取的结果作为series数据
          series: series
        };
        // 设置图表配置项
        myChart.setOption(option);
      }).catch(error => {
        // 处理可能发生的任何错误
        console.error("初始化图表时发生错误：", error);
      });
    },

    //猪只
    getPigNum() {
      //总数量
      selectPigNum('').then((res) => {
        this.titlePig.text = '猪只数量';
        this.titlePig.subtext = res.data + '只';

        this.initChartPig();
        this.loading = false;
      })
    },
    seriesDataPig() {
      return getDicts('hmy_pig_type').then(res => {
        var types = res.data;
        // 使用 Promise.all 来等待所有异步操作完成
        return Promise.all(types.map(item => {
          return selectPigNum(item.dictValue).then(num => {
            return {
              value: num.data,
              name: item.dictLabel,
            };
          });
        })).then(series => {
          // series 现在已经是一个包含所有异步结果的数组了
          // 返回你的图表数据结构，其中的 data 部分使用填充好的 seriess 数组
          return [
            {
              type: 'pie',
              name: '数量',
              center: ['35%', '50%'],
              radius: ['40%', '70%'], // 半径范围，即内外径比例
              data: series,
            }
          ];
        });
      }).catch(error => {
        console.error("出现错误：", error);
      });
    },
    initChartPig() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chartPig);
      // 调用seriesData函数，并等待其异步操作结束
      this.seriesDataPig().then((series) => {
        // 指定图表的配置项和数据
        const option = {
          // 图例配置
          legend: {
            // 显示图例，如果设置为false则不显示图例
            show: true,
            // 图例列表的布局朝向，可以是'horizontal'或'vertical'
            orient: 'vertical',
            // 图例的位置
            left: 600, // 可以是'left', 'center', 'right'，也可以是数值指定具体像素
            top: 'top', // 可以是'top', 'middle', 'bottom'，也可以是数值指定具体像素
          },
          title: this.titlePig,
          grid: [
            {
              left: 10
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)' // 自定义提示框内容
            // {a} 表示系列名，{b} 表示数据名，{c} 表示数据值，{d} 表示百分比
          },
          label: {
            show: true, // 显示标签
            position: 'inside', // 标签的位置，'inside' 表示标签位于扇形区域内部
            formatter: '{b}:{c}(只)', // 标签内容格式器，{c} 表示数值，{b} 表示数据项名称
            // 如果需要同时显示名称和数值，可以使用 '{b}: {c}'
          },
          // 使用异步获取的结果作为series数据
          series: series
        };
        // 设置图表配置项
        myChart.setOption(option);
      }).catch(error => {
        // 处理可能发生的任何错误
        console.error("初始化图表时发生错误：", error);
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

